<!-- 
 * @description: 视频文本化，需要安装使用 npm i text-to-image-video 插件实现
 * @fileName: index.vue 
 * @author: hoo 
 * @date: 2024-12-25 14:06:37 
!-->

<template>
  <div class="video-textualize-container">
    <div class="video-box">
      <canvas ref="canvasRef" class="canvas-element"></canvas>
    </div>
  </div>
</template>

<!-- 安装vite-plugin-vue-setup-extend插件让<script setup>标签</script>可以直接自定义组件名 -->
<script setup lang="ts" name="VideoTextualize">
import ikunVideo from "@/assets/media/videos/ikun.mp4"
// text-to-image-video导致控制台警告CJS
// @ts-ignore
import createTextImage, { type TextImageOption } from "text-to-image-video"

const canvasRef = ref()

const drawVideo = () => {
  const textImageOption: TextImageOption = {
    // 必填，配置canvas元素，最终作画在其上完成
    canvas: canvasRef.value,
    // 可选，配置作画的文本，默认为'6'
    replaceText: "ikun",
    // 可选，配置作画半径，该值越大越稀疏，默认为 10
    raduis: 10,
    // 可选，配置是否灰度化，若开启灰度化则会丢失色彩，默认为 false
    isGray: false,
    // 必填，配置作画内容
    // source: {
    //   text: "Text Image", // 绘制的文本是：Text Image
    //   fontFamily: "Roboto Mono",
    // },
    source: {
      // 必填，配置画的视频路径
      video: ikunVideo,
      // 选填，配置视频宽度，默认为视频自身宽度
      width: 500,
      // 选填，配置视频高度，默认为视频自身高度
      height: 300,
    },
  }
  createTextImage(textImageOption)
}

onMounted(() => {
  drawVideo()
})
</script>

<style lang="scss" scoped>
.video-textualize-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .video-box {
    width: 60vw;
    height: 70vh;
    .canvas-element {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
